<template>
  <view class="goods_list">
    <!-- 搜索 -->
    <van-search
      shape="round"
      background="#d81e06"
      placeholder="请输入搜索关键词"
    />
    <van-tabs :active="active" @change="onChange">
      <van-tab title="综合">
        <scroll-view
          class="goods_scroll"
          scroll-y
          refresher-enabled
          @refresherrefresh="refresherrefresh"
          @scrolltolower="scrolltolower"
          :refresher-triggered="refresherTriggered"
        >
          <navigator
            v-for="(item, index) in goods"
            :key="index"
            :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
          >
            <van-card
              :price="item.goods_price"
              :title="item.goods_name"
              :thumb="
                item.goods_small_logo ||
                'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3030023840,1652137957&fm=26&gp=0.jpg'
              "
              title-class="title-class"
              custom-class="custom-class"
            />
          </navigator>
        </scroll-view>
      </van-tab>
      <van-tab title="销量">销量</van-tab>
      <van-tab title="价格">价格</van-tab>
    </van-tabs>
  </view>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      // 请求参数
      params: {
        // 分类id
        cid: null,
        //  页码
        pagenum: 1,
        // 页容量
        pagesize: 10,
      },
      // 商品列表
      goods: [],
      // 总页数
      totalPages: 0,
      // 请求开关
      loading: false,
      // 下拉刷新
      refresherTriggered: true,
    };
  },
  // 监听页面
  onLoad(options) {
    this.params.cid = options.id;
    this.getList();
  },
  methods: {
    // 封装获取商品数据
    async getList() {
      const res = await this.get({ url: "/goods/search", data: this.params });
      // console.log(res);
      // 数组合并 分页
      this.goods = [...this.goods, ...res.goods];
      // 总页数
      this.totalPages = Math.ceil(res.total / this.params.pagesize);
    },
    // 下拉刷新
    async refresherrefresh() {
      this.goods = [];
      this.params.pagenum = 1;
      this.refresherTriggered = true;
      // 重新发送请求
      await this.getList();
      // 关闭刷新
      this.refresherTriggered = false;
    },
    // 底部上拉刷新
    async scrolltolower() {
      if (this.params.pagenum >= this.totalPages) {
        uni.showToast({ title: "已经是最底了", icon: "none" });
        return;
      }
      // 判断是否在请求，有，直接返回
      if (this.loading) {
        return;
      }
      this.loading = true;
      this.params.pagenum++;
      await this.getList();
      this.loading = false;
    },
    onChange(event) {
      // // console.log(event);
      // wx.showToast({
      //   title: `切换到标签 ${event.detail.name}`,
      //   icon: "none",
      // });
    },
  },
};
</script>

<style lang="less">
.goods_scroll {
  height: calc(100vh - 98px);
}
.custom-class {
  background-color: #fff !important;
  border-bottom: 1px solid #ccc;
}
.title-class {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>